import React, { Component } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { Row, Card, Col, Badge, Calendar } from 'antd';
import { connect } from 'dva';

import styles from './AttendanceMine.less';

@connect()
class AttendanceMine extends Component {
  getListData = value => {
    let listData;
    switch (value.date()) {
      case 8:
        listData = [{ type: 'warning', content: '打卡异常' }];
        break;
      case 10:
        listData = [{ type: 'error', content: '未打卡' }];
        break;
      case 15:
        listData = [{ type: 'warning', content: '打卡异常' }];
        break;
      default:
        break;
    }
    return listData || [];
  };

  dateCellRender = value => {
    const listData = this.getListData(value);
    return (
      <ul className={styles.events}>
        {listData.map(item => (
          <li key={item.content}>
            <Badge status={item.type} text={item.content} />
          </li>
        ))}
      </ul>
    );
  };

  getMonthData = value => {
    if (value.month() === 4) {
      return 1;
    }
    if (value.month() === 5) {
      return 2;
    }
    if (value.month() === 6) {
      return 1;
    }
    if (value.month() === 6) {
      return 1;
    }

    return null;
  };

  monthCellRender = value => {
    const num = this.getMonthData(value);
    return num ? (
      <div className={styles['notes-month']}>
        <section>{num}</section>
        <span>缺勤统计</span>
      </div>
    ) : null;
  };

  render() {
    const Info = ({ title, value, bordered }) => (
      <div className={styles.headerInfo}>
        <span>{title}</span>
        <p>{value}</p>
        {bordered && <em />}
      </div>
    );

    return (
      <PageHeaderWrapper>
        <div className={styles.standardList}>
          <Card bordered={false}>
            <Row>
              <Col sm={8} xs={24}>
                <Info title="异常打卡" value="8次" bordered />
              </Col>
              <Col sm={8} xs={24}>
                <Info title="未打卡" value="5次" bordered />
              </Col>
              <Col sm={8} xs={24}>
                <Info title="班级排名" value="24" />
              </Col>
            </Row>
          </Card>
        </div>

        <Card bordered={false} style={{ marginTop: 24 }}>
          <Calendar dateCellRender={this.dateCellRender} monthCellRender={this.monthCellRender} />
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default AttendanceMine;
